<template>
  <div class="add-problem-view">



    <el-form ref="form" :inline="true" :model="data" class="demo-form-inline" label-width="110px" size="medium" label-position="left" :rules="rules">
      <el-row>

        <el-col :span="12">
          <el-form-item label="所属项目">
            <span>{{data.project_name}}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="所属任务" >
            <el-select v-if="isProject" v-model="data.task_id" placeholder="请选择所属任务" @change="taskChange" clearable>
              <el-option
                v-for="item in taskList"
                :key="item.id"
                :label="item.task_name"
                :value="item.id">
              </el-option>
            </el-select>

            <span v-else>{{data.task_name}}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="问题名称" prop="problem_name">
            <el-input v-model="data.problem_name" placeholder="请输入问题名称"></el-input>
          </el-form-item>
        </el-col>

<!--        <el-col :span="12">-->
<!--          <el-form-item label="问题编号" prop="problem_no">-->
<!--            <el-input v-model="data.problem_no" placeholder="请输入问题编号"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

        <el-col :span="12">
          <el-form-item label="问题类型" prop="problem_type_id">
            <el-select v-model="data.problem_type_id" placeholder="请选择问题类型" @change="typeChange">
              <el-option
                v-for="item in types"
                :key="item.id"
                :label="item.dict_val"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="优先级" prop="priority_id">
            <el-select v-model="data.priority_id" placeholder="请选择优先级" @change="priorityChange">
              <el-option
                v-for="item in prioritys"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="负责人"  prop="functionary_id">
            <el-select v-model="data.functionary_id" placeholder="请选择负责人" @change="peopleChange">
              <el-option
                v-for="item in peoples"
                :key="item.member_id"
                :label="item.member_name"
                :value="item.member_id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="期望完成日期" prop="expect_end_time" >
            <el-date-picker
              v-model="data.expect_end_time"
              type="date"
              :editable="false"
              :clearable="false"
              placeholder="请选择完成日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="问题描述" prop="problem_describe" class="special-form-item">
            <el-input
              placeholder="请输入问题描述"
              v-model="data.problem_describe"
              type="textarea"
              :rows="2">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!--      <el-form :model="data" class="demo-form-inline" label-width="150px" size="medium" label-position="left" :rules="rules">-->

    <!--        <el-col :span="24">-->
    <!--          <el-form-item label="问题描述" prop="problem_describe">-->
    <!--            <el-input-->
    <!--              v-model="data.problem_describe"-->
    <!--              type="textarea"-->
    <!--              :rows="2">-->
    <!--            </el-input>-->
    <!--          </el-form-item>-->
    <!--        </el-col>-->

    <!--      </el-form>-->





  </div>
</template>

<script>
    export default {
        name: "addProblemView",
        props:{
            data:{
                type:Object,
                default:function () {
                    return{

                    }
                }
            },
            isProject:{
                type:Boolean,
                default:true
            },
            person:{
                type:Object,
                default(){
                    return null
                }
            }
        },
        watch: {

            data:{
                handler(newval, oldval) {
                    if (newval){
                        if (newval.task_id){
                            this.getTask(newval.task_id)
                        }else {
                            if (!this.project.id){
                                this.getProjectData(newval.project_id)
                            }

                            //this.getTaskData(newval.project_id)
                        }
                    }
                },
                deep: true,
                immediate: true
            }
        },
        data:function () {
            return{
                taskList:[],
                pickerOptions: {
                    disabledDate:time=> {
                        if (time.toLocaleDateString() == new Date().toLocaleDateString()){
                            return false
                        }
                        return time.getTime() < new Date().getTime();
                    }
                },
                peoples:[],
                rules:{
                    problem_name: [
                        { required: true, message: '请输入问题名称', trigger: 'blur' }
                    ],
                    problem_no: [
                        { required: true, message: '请输入问题编号', trigger: 'blur' }
                    ],
                    problem_type_id: [
                        { required: true, message: '请选择问题类型', trigger: 'change' }
                    ],
                    priority_id: [
                        { required: true, message: '请选择优先级', trigger: 'change' }
                    ],
                    task_id:[
                        { required: true, message: '请选择所属任务', trigger: 'change' }
                    ],
                    functionary_id: [
                        { required: true, message: '请选择负责人', trigger: 'change' }
                    ],
                    expect_end_time: [
                        { required: true, message: '请选择期望完成日期', trigger: 'change' }
                    ],
                    problem_describe: [
                        { required: true, message: '请输入问题描述', trigger: 'blur' }
                    ],
                    target: [
                        { required: true, message: '请选择问题目标', trigger: 'change' }
                    ],
                    ss:[],
                },
                targets:[
                    {
                        value:1,
                        label:'项目'
                    },
                    {
                        value:2,
                        label:'任务'
                    }
                ],
                types:[],
                project:{},
                prioritys:[
                    {
                        value:"1",
                        label:'高'
                    },
                    {
                        value:"2",
                        label:'中'
                    },
                    {
                        value:"3",
                        label:'低'
                    }
                ],
            }
        },
        mounted:function(){
            this.types = this.$store.getters.sysDic('problem_type')
        },
        methods:{
            getTask:function (id) {
                this.$api.PROJECT_START_TASK_DETAIL(id).then(res=>{
                    if (res.code == 200){
                        this.peoples = [...res.data.task_member]
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            getProjectData:function(id){
                this.$api.PROJECT_MANAGER_PROJECT_DETAIL(id).then(res=>{
                    if (res.code == 200){
                        this.project = res.data;
                        this.peoples = [...res.data.member]

                        this.taskList = [];
                        this.dealTaskData(res.data.project_task ? res.data.project_task : [])
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            getTaskData:function(id){
                this.$api.PROJECT_START_TASK_PROJECT_TREE({project_id:id}).then(res=>{
                    if (res.code == 200){
                        this.taskList = [];
                        this.dealTaskData(res.data ? res.data : [])
                    }
                })
            },
            dealTaskData:function(list){
                for (let i = 0; i < list.length; i++){
                    let data = list[i];
                    this.taskList.push(data);
                    if (data.children && data.children.length){
                        this.dealTaskData(data.children)
                    }
                }
            },
            targetChange:function(){
                if (this.data.target == 1){
                    this.data.functionary_id = this.person.id
                    this.data.functionary = this.person.name
                }else{
                    this.data.functionary_id = ''
                    this.data.functionary = ''
                }
            },
            taskChange:function(id){

                if (id){
                    let index = this.taskList.findIndex(a=>a.id == id)
                    if (index != -1){
                        let type = this.taskList[index]
                        this.data.task_id = type.id + "";
                        this.data.task_name = type.task_name;

                        this.peoples = [...type.task_member]
                    }
                }else{
                    if (this.project){
                        this.peoples = [...this.project.member]
                    }
                    this.data.task_id = "";
                    this.data.task_name = "";
                }
                this.data.functionary_id = "";
                this.data.functionary = "";
            },
            peopleChange:function (id) {
                let index = this.peoples.findIndex(a=>a.member_id == id)
                if (index != -1){
                    let type = this.peoples[index]
                    this.data.functionary_id = type.member_id + "";
                    this.data.functionary = type.member_name;
                }
            },
            typeChange:function (id) {
                let index = this.types.findIndex(a=>a.id == id)
                if (index != -1){
                    let type = this.types[index]
                    this.data.problem_type_id = type.id + "";
                    this.data.problem_type = type.dict_val;
                }
            },
            priorityChange:function (id) {
                let index = this.prioritys.findIndex(a=>a.value == id)
                if (index != -1){
                    let type = this.prioritys[index]
                    this.data.priority_id = type.value + "";
                    this.data.priority = type.label;
                }
            },
            formValidate:function () {

                return this.$refs.form.validate()
            }
        }
    }
</script>

<style lang="scss" scoped>
  ::v-deep .el-form-item{
    width: 100%;
    .el-form-item__content{
      width: 245px;
    }
    .el-input{
      width: 245px;
    }
  }
  ::v-deep .special-form-item{
    width: 100%;
    .el-form-item__content{
      width: calc( 100% - 110px);
    }
    .el-textarea{
      width: 625px;
    }

  }

</style>
